{% load static %}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>layout 管理界面大布局示例 - Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}">
  <style>
    table img {
      width: 90px;
    }
  </style>
</head>
<body>
  <div class="layui-layout layui-layout-admin">
      {% include 'header.html' %}
      <div class="layui-body">
      <!-- 内容主体区域 -->
      <div style="padding: 15px;">
              <div id="main" style="width: 400px; height: 400px;"></div>
      </div>
      <div class="layui-footer">
        <!-- 底部固定区域 -->
        底部固定区域
      </div>
    </div>
    <script src="{% static 'js/jquery.js' %}"></script>
    <script src="{% static 'layui/layui.js' %}"></script>
    <script src="{% static 'js/echarts.js' %}"></script>
          <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

     // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['人数']
        },
        xAxis: {
          data: ['学生', '老师', '其他']
        },
        yAxis: {},
        series: [
          {
            name: '人数',
            type: 'bar',
            data: [5, 20, 36]
          }
        ]
      };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        // 假设 myChart 是之前已经初始化的 ECharts 实例
var myChart;

// 页面加载完成后执行
window.onload = function() {
    $.ajax({
        url: "/get_category/", // 请求的URL
        success: function(res) {
            if (res.code === 200) {
                // 获取接口返回的分类数据和对应的数量数据
                var categories = res.data.categories;
                var counts = res.data.counts;

                // 准备用于ECharts图表展示的数据格式
                var xAxisData = categories.map(String); // 将数字类型的分类转换为字符串
                var seriesData = counts;

                // 指定图表的配置项和更新后的数据
                var option = {
                    title: {
                        text: 'ECharts 入门示例'
                    },
                    tooltip: {},
                    legend: {
                        data: ['人数']
                    },
                    xAxis: {
                        data: xAxisData
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '人数',
                            type: 'bar', // 指定图表类型为柱状图
                            data: seriesData
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表，更新图表配置
                myChart.setOption(option);
            }
        },
        error: function(err) {
            console.log(err); // 在控制台打印错误信息
        }
    });
};
    </script>
</body>

</html>